// 图表: 租赁收费汇总
import * as $echarts from '../../../components/ec-canvas/echarts'
import $chartOption from '../../../data/chartOption.js'

const $app = getApp()

function initChart(canvas, width, height, dpr) {
  let chart = $echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  })
  canvas.setChart(chart)
  // 设置图表配置项
  let option = {
    title: { text: '租赁收费汇总' },
    legend: { // ===== 图例组件 =====
      ...$chartOption.legend,
      orient : 'horizontal',  
      right: 0,
      top: 10
    },
    grid: {
      left: 10,
      right: 50,
      bottom: 10,
      top: 60,
      containLabel: true
    },
    xAxis: { // ===== x轴 =====
      type: 'value',
      name: '收费',
      axisLine: $chartOption.axis_axisLine, // 轴线相关设置
      splitLine: $chartOption.axis_splitLine, // 分隔线
      axisLabel: {
        formatter: (value) => {
          return (value / 10000).toFixed(0) + '万'
        }
      }
    },
    yAxis: { // ===== y轴 =====
      type: 'category', // 类型: 类目轴
      name: '月份',
      axisLine: $chartOption.axis_axisLine // 轴线相关设置
      // axisTick: { alignWithLabel: true } // boundaryGap:true时, 刻度线和标签对齐
    },
    dataZoom: [{ type: 'inside' }], // 区域缩放
    tooltip: $chartOption.tooltip_bar, // ===== 提示框组件 =====
    series: [{
      ...$chartOption.series_bar,
      name: '应收',
      data: []
    }, {
      ...$chartOption.series_bar,
      name: '实收',
      data: []
    }],
    color: $chartOption.color2,
    textStyle: $chartOption.textStyle // ===== 全局的字体样式 =====
  }
  $app.$api.data.rentalCharges({}).then(({ data }) => {
    console.log('api-租赁收费汇总', data)
    let newData = data || []
    for (const i in newData) {
      const b = newData[i]
      const x0 = b.paymentMoney // 应收
      const x1 = b.truePay // 实收
      const y = b.paymentTimeDate ? `${b.paymentTimeDate}月` : '欠缴' // 月份
      option.series[0].data.unshift([x0, y])
      option.series[1].data.unshift([x1, y])
    }
    chart.setOption(option)
  }).catch((err) => {})
  return chart
}

Component({
  data: {
    ec: { onInit: initChart }
  }
})
